<template>
	<view>
		<!--		<navbar title="餐饮预定"></navbar>-->
		<!--		<view class="filter-bar">-->
		<!--			<view class="filter-item active">默认<view class="arrow place"></view></view>-->
		<!--			<view class="filter-item">距离<view class="arrow place"></view></view>-->
		<!--			<view class="filter-item">评分<view class="arrow place"></view></view>-->
		<!--			<view class="filter-item">价格<view class="arrow place"></view></view>-->
		<!--		</view>-->
		<!--		<view style="height: 40px;"></view>-->
		<view class="store-item" @click="goDetails(item)" v-for="(item, index) in dataList" :key="index">
			<image class="cover" :src="item.mer_avatar"></image>
			<view class="desc-bg">
				<view class="name">{{item.mer_name}}</view>
				<view class="addr">{{ item.mer_address }}</view>
				<view class="dist">{{item.distance}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import dataList from '@/mixins/dataList'
	import {
		storeMerchantList
	} from '@/api/2_store';
	export default {
		name: 'StoreList',
		mixins: [dataList],
		data() {
			return {
				location: ''
			};
		},

		onLoad() {
			this.setDataListReq(storeMerchantList)
			uni.getLocation({
				success: (e) => {
					console.log(e)
					this.location = `${e.latitude},${e.longitude}`
					this.setDataListPar({
						type_id: 1,
						location: this.location,
					})
					this.getDataList()
				},
				fail:function(e){
					console.info(e)
				}
			})
		},

		methods: {
			goDetails(item) {
				uni.navigateTo({
					url: `/pages/2_development/store/details?id=${item.mer_id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
	}

	.filter-bar {
		height: 40px;
		background: #fff;
		display: flex;
		position: fixed;
		z-index: 9;
		top: 0;
		right: 0;
		left: 0;

		.filter-item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #999;
			font-size: 14px;

			.arrow {
				width: 11px;
				height: 11px;

				margin-left: 2px;
			}

			&.active {
				color: #2BA5FF;
			}
		}
	}

	.store-item {
		height: 207rpx;
		border-radius: 11px;
		background: #fff;
		margin: 10px 14px;
		padding: 19rpx;
		display: flex;
		flex-direction: row;
		
		.cover{
			width: 167rpx;
			height: 167rpx;
			border-radius: 5px;
		}
		.desc-bg{
			flex: 1;
			margin-left: 10px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.name {
				font-weight: bold;
				font-size: 30rpx;
				line-height: 1;
				color: #0b0b0b;
				margin-top: 3px;
			}
			.addr {
				font-size: 26rpx;
				line-height: 30rpx;
				color: #333;
			}
			.dist {
				font-size: 26rpx;
				color: #999;
				line-height: 1;
			}
		}

		.image {
			width: 112px;
			height: 112px;
			border-radius: 5px;
			margin-right: 9px;
		}

		.info {
			margin-top: 13px;
			flex: 1;
			display: flex;
			flex-direction: column;
			background-color: #FF3700;
		}

	}
</style>
